<template>
	<view class="columnbox wdh-100 content">
		<view class="color-box columnbox wdh-100 ">
			<view class="rowbox wdh-100 jus">
				<image mode="aspectFill" class="user-img"
					:src="userInfo.user.avatar==null?'/static/img/logo.jpeg':userInfo.user.avatar">
				</image>
				<view class="columnbox als">
					<view class="user-name">{{userInfo.user.nickName}}</view>
					<view class="join">加入时间：2024-05-20</view>
				</view>
			</view>
			<view class="columnbox o-box">
				<view class="o-title wdh-100">洗车站数据</view>
				<view class="rowbox wdh-100 spb" style="margin-top: 40rpx;">
					<view class="columnbox o-info" @click="showStationNum">
						<view class="o-num">{{dataStatistics.stationNum||0}}</view>
						<view class="o-desc">洗车站数量</view>
					</view>
					<view class="columnbox o-info">
						<view class="o-num"><text style="font-size: 24rpx;margin-right: 4rpx;">¥</text>
							{{dataStatistics.allSales||0}}
						</view>
						<view class="o-desc">总营业额</view>
					</view>
					<view class="columnbox o-info" @click="showOrderNum">
						<view class="o-num">{{dataStatistics.allWashOrder||0}}</view>
						<view class="o-desc">总订单数</view>
					</view>
				</view>
			</view>
			<view class="t-box rowbox spb">
				<view class="rowbox wdh-100 jus">
					<view class="columnbox o-info">
						<view class="o-num r-title">+{{dataStatistics.todayWashOrder||0}}</view>
						<view class="o-desc">今日新增订单</view>
					</view>
					<view class="columnbox o-info">
						<view class="o-num r-title"><text
								style="font-size: 24rpx;margin-right: 4rpx;">¥</text>{{dataStatistics.todaySales||0}}
						</view>
						<view class="o-desc">今日新增消费</view>
					</view>
					<view class="columnbox o-info">
						<view class="o-num r-title">¥{{dataStatistics.todayRefund||0}}</view>
						<view class="o-desc">今日退单金额</view>
					</view>
				</view>
			</view>
		</view>


		<view class="columnbox o-box">
			<view class="o-title wdh-100">管理工具</view>
			<view class="t-list wdh-100">
				<view class="columnbox t-one-box" @click="stationList">
					<image src="/static/img/xczgl.png" mode="widthFix"></image>
					洗车站管理
				</view>
				<view class="columnbox t-one-box" @click="showGongWei">
					<image src="/static/img/gwgl.png" mode="widthFix"></image>
					工位管理
				</view>
				<view class="columnbox t-one-box" @click="yuyuedingdan">
					<image src="/static/img/yydd.png" mode="widthFix"></image>
					预约订单
				</view>
				<view class="columnbox t-one-box" @click="showOrderNum">
					<image src="/static/img/ddgl.png" mode="widthFix"></image>
					订单管理
				</view>
				<view class="columnbox t-one-box" @click="showStaff">
					<image src="/static/img/rygl.png" mode="widthFix"></image>
					人员管理
				</view>
				<view class="columnbox t-one-box" @click="sacncode">
					<image :src="imgurl" mode="widthFix"></image>
					扫码核销
				</view>
			</view>
		</view>
		<tabBar :value='1'></tabBar>
	</view>
</template>

<script>
	import tabBar from '@/components/tabbar/tabbar.vue'
	export default {
		components: {
			tabBar
		},
		data() {
			return {
				dataStatistics: '',
				imgurl:this.$imgUrls + '2024/11/11/41924eec7b0b466eb044632ae1928d63.png'
			};
		},
		computed: {
			// 通过计算属性将 state 中的 count 映射到组件
			isLogin() {
				return this.$store.state.isLogin;
			},
			userInfo() {
				return this.$store.state.user;
			},
		},
		onLoad() {
			uni.hideTabBar()
		},
		onShow() {
			if (this.isLogin) {
				this.getData()
			} else {
				this.dataStatistics = {
					stationNum: 0,
					allSales: 0,
					todaySales: 0,
					todayWashOrder: 0,
					allWashOrder: 0
				}
			}
		},
		methods: {
			yuyuedingdan(){
				this.$tab.navigateTo('/packageC/yuyuedingdan/yuyuedingdan')
			},
			// 扫码核销
			sacncode(){
				console.log('11')
				let that = this;
				// 允许从相机和相册扫码
				uni.scanCode({
					scanType:['qrCode','datamatrix','pdf417'],
					success:(res)=> {
						console.log('22')
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						console.log(res)
						that.$tab.navigateTo(`/packageB/orderwriteoff/orderwriteoff?code=${res.result}`);
					}
				});
			},
			showOrderNum() {
				uni.navigateTo({
					url: '/packageA/work/orderNum/orderNum'
				})
			},
			showStationNum() {
				uni.navigateTo({
					url: '/packageA/work/stationNum/stationNum'
				})
			},
			getData() {
				if (this.isLogin) {
					this.$req.get('/xcx/manager/count/home').then(res => {
						console.log(res)
						if (res.data.code==200) {
							this.dataStatistics = res.data.data
						}else{
							this.$modal.msg(res.data.msg)
						}
					})
				}
			},
			showStaff() {
				uni.navigateTo({
					url: '/packageA/staff/list'
				})
			},
			showGongWei() {
				uni.navigateTo({
					url: '/packageA/gongwei/index'
				})
			},
			stationList() {
				uni.navigateTo({
					url: '/packageA/xichezhan/list'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		font-family: PingFang SC;
		background: #F4F5FA;
		min-height: 100vh;
		justify-content: flex-start;
	}

	.color-box {
		background: linear-gradient(180deg, #2373CA 0%, #F4F5FA 100%);
		padding: 0 20rpx;
		padding-top: 0;

		.user-image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 100rpx;
			margin-right: 20rpx;
		}

		.user-name {
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 32rpx;
			color: #FFFFFF;
		}

		.join {
			margin-top: 10rpx;
			font-family: PingFang SC, PingFang SC;
			font-size: 24rpx;
			color: #FFFFFF;
		}

		.user-img {
			width: 100rpx;
			height: 100rpx;
			border-radius: 100rpx;
			margin-right: 16rpx;
		}
	}

	.o-box {
		width: 710rpx;
		background: #fff;
		padding: 24rpx;
		border-radius: 24rpx;
		margin-top: 36rpx;

		.o-title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 28rpx;
			color: #000000;
		}
	}

	.o-info {
		width: 33%;

		.o-num {
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 44rpx;
			color: #126BC9;
		}

		.o-desc {
			font-family: PingFang SC, PingFang SC;
			font-size: 28rpx;
			color: #212121;
			margin-top: 8rpx;
		}

		.r-title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 44rpx;
			color: #FF672D;
		}
	}

	.t-box {
		width: 710rpx;
		background: #fff;
		padding: 32rpx 32rpx;
		border-radius: 20rpx;
		margin-top: 20rpx;
	}

	.t-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.t-one-box {
		width: 25%;
		margin-top: 50rpx;
		font-family: PingFang SC, PingFang SC;
		font-size: 24rpx;
		color: #212121;

		image {
			width: 50rpx;
			height: 50rpx;
			margin-bottom: 10rpx;
		}
	}
</style>